<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">类型</label>
                <div class="col-sm-10 typeRadio">
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="1" checked> 菜单 </label>
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="2"> 按钮 </label>
                </div>
            </div>
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="nameId" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
                </div>
            </div>
            <div class="form-group">
                <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="urlId" placeholder="url">
                </div>
            </div>
            <div class="form-group">
                <label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
                <div class="col-sm-10">
                    <input type="text" id="permissionId"
                           placeholder="多个用逗号分隔，如：user:list,user:create"
                           class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="sortId" class="col-sm-2 control-label">排序号：</label>
                <div class="col-sm-10">
                    <input type="text" id="sortId" placeholder="排序号"
                           class="form-control">
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <!-- zTree 对应的div -->
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
        <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a>
            <a class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>

</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script type="text/javascript">
    var zTree; //zTree是第三方扩展的一个Jquery插件
    //初始化zTree时会用到
    var setting = {
        data : {
            simpleData : {
                enable : true,
                idKey : "id",  //节点数据中保存唯一标识的属性名称
                pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  //根节点id
            }//json 格式javascript对象
        }
    }//json 格式的javascript对象

    $(function() {
        //加载菜单树的事件注册
        //如点击上级菜单则加载数据
        $(".form-group")
            .on("click", ".load-sys-menu", doLoadZtreeNodes);

        //在menulayer中按钮事件注册
        // （对选中上级菜单的 确定和取消注册，以及设定它们将要执行的方法）
        $("#menuLayer")
            .on("click",".btn-confirm",doSetSelectNode)//确定
            .on("click",".btn-cancel",doHideTree);//取消

        //按钮点击事件的注册
        $(".box-footer")
            .on("click",".btn-save,.btn-update",doSaveOrUpdate)
            .on("click",".btn-cancel",doCancel);

        //获取mainContentId上的值
        var rowData=$("#mainContentId").data("rowData");
        //如果rowData有值说明是修改，则基于此值编辑初始的页面
        if (rowData) doInitEditFormData(rowData);
    })
    //初始化表单数据
    function doInitEditFormData(rowData) {
        //将获取的数据状态改为true
        $("input[value="+rowData.type+"]").prop("checked",true);
        $("#nameId").val(rowData.name);
        $("#sortId").val(rowData.sort);
        $("#permissionId").val(rowData.permission);
        $("#urlId").val(rowData.url);
        $("#parentId").val(rowData.parentName);
        $("#parentId").data("parentId",rowData.parentId);//重新绑定时设置为父类的数据id
    }
    //cancel按钮事件处理函数,回到列表页面
    function doCancel() {//如果点击选择菜单的取消，则重新查询加载menu_list。
        $("#mainContentId").load("menu/menu_list");
    }
    //save按钮事件处理函数
    function doSaveOrUpdate() {
        //1.获取表单中用户输入的数据
        var params=doGetEditFormData();
        // console.log("params",params);
        var rowData=$("#mainContentId").data("rowData");
        if(rowData)params.id=rowData.id; //获取选中的id
        //2.定义url
        //添加的url
        var insertUrl="menu/doSaveObject";
        //修改的url
        var updateUrl="menu/doUpdateSaveObject";
        //如果选中了id  执行修改业务  没有则执行添加操作
        var url=rowData?updateUrl:insertUrl

        //3.发送异步请求，将数据提交到后端
        $.post(url,params,function (result) {
            if(result.state==1){
                alert(result.message);
                //保存成功回到列表页面
                doCancel();
            } else {
                alert(result.message);
            }
        });
    }
    //获取表单数据处理函数
    function doGetEditFormData() {
        var params={
            "type":$("input[name='typeId']:checked").val(),
            "name":$.trim($("#nameId").val()),
            "parentId":$("#parentId").data("parentId"),
            "url":$.trim($("#urlId").val()),
            "sort":$.trim($("#sortId").val()),
            "permission":$.trim($("#permissionId").val()),
        }
        return params;
    }

    //设置上级菜单选中的节点对象
    function doSetSelectNode() {
        //1.获取选中的节点
        var nodes = zTree.getSelectedNodes();
        if (!nodes || nodes.length==0){
            doHideTree();
            return;
        }
        //2.将选中节点的id和name内容填充到页面
        $("#parentId").data("parentId",nodes[0].id);
        $("#parentId").val(nodes[0].name);
        //3.隐藏ZTree
        doHideTree();
    }
    //设置ZTree数确定和取消按钮事件
    function doHideTree() {//将选择菜单后的css属性改为隐藏
        $("#menuLayer").css("display","none");
    }
    //加载ZTree菜单
    function doLoadZtreeNodes() {
        //请求url
        var url="menu/doFindZtreeMenuNodes";
        $.getJSON(url,function (result) {
            // console.log("result",result);
            if (result.state==1){
                zTree=$.fn.zTree.init(
                    $("#menuTree"),
                    setting,
                    result.data
                );
                //修改id为menuLayer的浮动状态
                $("#menuLayer").css("display","block");
            }
        })

    }

</script>
    
    
    
    
    
    
    
    
    